import React, { useState, useEffect } from 'react'
import { Button, Tag, Form, Table, Card } from 'antd'
import SearchForm from './search'
import OperaPrompt from '../../../components/OperaPrompt'
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import request from '@/utils/request'
import { history } from 'umi'

export default (props: any) => {

    const { location } = props
    const [tableData, setTableData] = useState({ list: [], pagination: { total: 0, current: location.state?.current ?? 1 } })
    const [searchParams, setSearchParams] = useState({ industryList: [], levelList: [] })
    const [searchForm] = Form.useForm()
    const columns: any = [
        {
            title: '店铺名称',
            dataIndex: 'store_title'
        },
        {
            title: '卖家账号',
            dataIndex: 'store_user_name',
        },
        {
            title: '店铺等级',
            dataIndex: 'level_title',
            render: (text: any) => <Tag color="cyan">{text}</Tag>
        },
        {
            title: '主营行业',
            dataIndex: 'industry_title',
        },
        {
            title: '是否自营',
            dataIndex: 'is_own',
            align: "center",
            render: (text: any) => <Tag color={text ? "blue" : "red"}>{text ? "是" : "否"}</Tag>
        },
        {
            title: '店铺认证',
            dataIndex: 'is_auth',
            render: (text: any) => {
                return (
                    <Tag color={text ? "blue" : "red"}>{text ? "已认证" : "未认证"}</Tag>
                )
            }
        },
        {
            title: '店铺状态',
            dataIndex: 'status_title',
            render: (text: any) => {
                return (
                    <Tag color="green">{text}</Tag>
                )
            }
        },
        {
            title: '入驻时间',
            dataIndex: 'join_at',
        },
        {
            title: '到期时间',
            dataIndex: 'expired_at',
        },
        {
            title: '操作',
            dataIndex: 'option',
            valueType: 'option',
            render: (text: any, record: any) => (
                <>
                    <Button size="small" onClick={() => {
                        history.push(`/store/list/manage/${record.id}`, { current: tableData.pagination.current })
                    }} >店铺管理</Button>
                </>
            ),
        },
    ];

    const getList = (params: any = {}) => {
        request(`/store/list`, { params: { pageSize: params.pageSize ?? 10, ...params } }).then((result) => {
            setTableData({ list: result.data, pagination: { total: result.total, current: params.current ?? tableData.pagination.current } })
        })
    }

    useEffect(() => {
        getList({ current: tableData.pagination.current })
        request(`/store/search-params`).then((result) => {
            const data=result.data
            setSearchParams({industryList:data.industryList,levelList:data.levelList})
        })
    }, [])
    return (
        <PageHeaderWrapper title={false}>
            <Card>
                <OperaPrompt dataList={[
                    "当前页面对店铺的信息进行管理，可以添加店铺，查看店铺账户信息，认证信息等。"
                ]} />
                <SearchForm form={searchForm} getList={getList} searchParams={searchParams}/>
                <Table
                    rowKey="id"
                    dataSource={tableData.list}
                    columns={columns}
                    pagination={{ total: tableData.pagination.total, pageSize: 10, current: tableData.pagination.current }}
                    onChange={(pagination: any, filters: any, sorter: any, extra: any) => {
                        getList({ current: pagination.current, pageSize: pagination.pageSize })
                    }}
                />
            </Card>
        </PageHeaderWrapper >
    )
}